



<template>
  <div class="card"  style="margin-bottom: 10px; display: flex;">
    <h3 style="padding-left: 360px">第三方管理充值界面</h3>
    <el-button type="info" style="margin-left: 550px;width: 100px"  @click="handleAddhome">返回首页</el-button>
  </div>
  <div class="card" style=" margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center;">
    <el-form-item label="第三方appKey" style="margin-bottom: 0;">
      <el-input v-model="$route.query.app_key" disabled style="width: 200px;" />
    </el-form-item>
    <el-form-item label="总金额" style="margin-bottom: 0;">
      <el-input v-model="$route.query.total_amount" disabled style="width: 200px;" />
    </el-form-item>
    <el-form-item label="单价" style="margin-bottom: 0;">
      <el-input v-model="$route.query.unit_price" disabled style="width: 200px;" />
    </el-form-item>
    <el-form-item label="可用数量" style="margin-bottom: 0;">
      <el-input v-model="$route.query.usable_count" disabled style="width: 200px;" />
    </el-form-item>
  </div>
  <div class="card"  style="margin-bottom: 10px;display: flex;">
    <el-button type="success"  style="margin-left: 1080px;width: 100px" v-if="user.data[0].role==='Root'"  @click="handleAdd">充值</el-button>


  </div>

  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="250" />
      <el-table-column prop="platform_id" label="平台id" width="150" />
      <el-table-column prop="create_time" label="创建时间 " width="200" />
      <el-table-column prop="app_key" label="第三方appKey" width="300" />
      <el-table-column  prop="single_record" label="单次金额记录 " width="300" />

    </el-table>

  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />


  </div>
  <el-dialog width="35%" v-model="data.formVisible" title="充值信息">
    <el-form-item  :model="data.form" label="appKey"label-width="100px" label-position="right" style="padding-right: 30px">
      <el-input v-model="$route.query.app_key" disabled  />
    </el-form-item>
    <el-form-item  :model="data.form"label="总金额" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-input v-model="$route.query.total_amount" disabled  />
    </el-form-item>
    <el-form-item :model="data.form" label="单价"label-width="100px" label-position="right" style="padding-right: 30px">
      <el-input v-model="$route.query.unit_price" disabled  />
    </el-form-item>
    <el-form-item :model="data.form" label="可用数量"label-width="100px" label-position="right" style="padding-right: 30px">
      <el-input v-model="$route.query.usable_count" disabled  />
    </el-form-item>
    <el-form :model="data.form" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-form-item label="充值金额" >
        <el-input v-model="data.form.single_record" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>



import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import { reactive, watch } from 'vue';  // Import watch from vue
import { useRoute } from 'vue-router';

const route = useRoute();

const user =JSON.parse(localStorage.getItem('student-user')||'{}')

const data = reactive({
  app_key: '',
  single_record: '',
  platform_id: '',
  tableData: [],
  total: 0,
  pageSize: 10,
  pageNum: 1,
  formVisible: false,  // Add this if you're watching it
  form: {  // Add the form object since you're using it in the watcher
    app_key: '',
    total_amount: '',
    unit_price: '',
    usable_count: '',
    single_record: ''
  }
});

watch(() => data.formVisible, (isVisible) => {
  if (isVisible) {
    data.form.app_key = route.query.app_key || '';
    data.form.total_amount = route.query.total_amount || '';
    data.form.unit_price = route.query.unit_price || '';
    data.form.usable_count = route.query.usable_count || '';
    data.form.single_record = ''; // 清空上次输入
  }
});


const load = () =>{
  request.get('/recharge/selectPage/'+ route.query.app_key,{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      total:data.total,
      // id:data.id,
      formVisible:false,
      form:{}

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0



  })


}
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}

load()
// const handelCurrentChange =(pageNum)=>{
//   //当翻页当时候从新加载数据
//   load()
//
// }

const reset = () =>{
  data.name = ''
  data.descr = ''
  data.teacher = ''
  load()
}


const handleAdd = () =>{
  data.form= {}
  //清空数据
  data.formVisible =true
  //打开弹窗

}



const handleAddhome = () =>{
  location.href=`/Course`
  //打开弹窗

}

//编辑信息
//保存信息
const save = () => {
  // 检查 single_record 是否为小数
  if (data.form.single_record % 1 !== 0) {
    ElMessage.warning("请输入整数，不要使用小数");
    return; // 阻止后续提交
  }

  // 提交请求
  request.request({
    url: '/add',          // 固定请求路径（仅新增）
    method: 'POST',       // 固定 HTTP 方法（POST）
    data: data.form       // 提交表单数据
  }).then(res => {
    if (res.data.code === 1) {
      // 操作成功逻辑
      load();             // 重新加载数据（如刷新表格）
      data.formVisible = false; // 关闭弹窗
      ElMessage.success("充值成功");
      setTimeout(() => {
        location.href = '/Course';
      }, 700);
    } else {
      // 操作失败逻辑
      console.log(res);   // 打印错误响应（调试用）
      ElMessage.error("操作失败"); // 显示失败提示
    }
  }).catch(err => {
    console.error(err);   // 打印请求错误（调试用）
    ElMessage.error("请求失败，请检查网络");
  });
};

const handleEdit =(row)=>{
  data.form =JSON.parse(JSON.stringify(row))//进行深层拷贝到form里
  data.formVisible =true//打开弹窗



}

const dele =(id)=>{
  //确认信息
  ElMessageBox.confirm('删除该数据后该数据无法恢复，您确定删除吗？','删除确认',{
    type:'warning'
  }).then(res=>{
    request.delete('/delete/'+id).then(res=>{
      //记得加斜杆/delete/
      if (res.data.code===1){
        load()
        ElMessage.success( "操作成功")

      }else {
        console.log(res)
        ElMessage .error("操作失败")
      }
    })
  }).catch(() => {
    ElMessage({

      type: 'info',
      message: 'Delete canceled'
    })
  })

}


</script>






<style scoped>

</style>

